<template>
	<view class="w100p common_wrap">
		<CommonHeader :title="$t('采购寻单')" color="#262728" :is-right="true">
		</CommonHeader>

		<!-- 切换tab -->
		<view class="tab-wrapper" >
			<view :class="['tab', index == currentTapIndex && 'active']" v-for="(item, index) in tabList" :key="index"
				@click="onTab(index)">
				<text>{{ item.title }}</text>
				<uni-badge :customStyle="{ background: '#f00' }" :text="index==1? unViewNumbers.releaseNumber: index==2? unViewNumbers.joinNumber:0" absolute="rightTop" :offset="[-3, -6]" />
			</view>
		</view>

		<view class="w100p common_search" v-if="currentTapIndex != 3">
			<view class="w100p search_wrap">
				<!-- <uni-icons type="search" size="36rpx" color="#262728"></uni-icons>
				<text class="flex-item text">{{ $t('搜索') }}</text> -->
				<input @input="goSearch" type="text" :placeholder="$t('搜索')" />
			</view>
			<tipSl :text="$t('【重要提示】请如实描述发布内容及相关信息，禁止虚假宣传！违规信息将下架或封号处理。')" style="margin: 0;background-color: transparent;padding-left:0;padding-right: 0;"></tipSl>

		</view>

		<view class="w100p pr list_block" v-show="currentTapIndex != 3">
			<scroll-view 
				:scroll-top="scrollTop" 
				scroll-y="true" 
				class="w100p scroll-Y" 
				refresher-enabled="true"
				@scrolltolower="lower" 
				@refresherrefresh="fresh" 
				refresher-background="transparent"
				:refresher-triggered="isRefresher" 
				@refresherrestore="store" 
				@touchmove.stop>
				<!-- <view style="height: 20rpx;"></view> -->
				<view v-if="currentTapIndex==0" class="w100p category_wrap">
					<scroll-view class="w100p scroll-view_H" scroll-x="true" scroll-left="0">
						<view class="scroll-view-item_H" v-for="item in categoryList" :key="item.id"
							@click="firstCategory(item.id)">
							<image class="goback_img" :src="item[plang('pic')]" mode="widthFix"></image>
						</view>
					</scroll-view>
				</view>

				<!-- 列表 -->
				<view class="list-wrapper ">
					<u-empty :text="$t('暂无相关数据')" mode="order" v-if="!purchaseList.length" :margin-top="180"></u-empty>
					<view class="list" v-for="(item, index) in purchaseList" :key="index" @click="onGoDetail(item.purchaseInfo.id)">
									<!-- 基础信息 -->
							<view class="base-info">
								<view class="left-avatar">
									<view class="avatar-w">
										<view class="avatar">
											<image v-if="item.avatar" :src="getImageUrl(item.avatar)" mode="aspectFill"></image>
										</view>
										<view class="country">
											<flag :country="item.country"></flag>
											<!-- <image src="/static/caigou/china.png"></image> -->
										</view>
									</view>
									<view class="desc-avatar" :style="lang == 'ru'?'width:180rpx':''">
										<view class="name ellipsis_one">{{item[plangJava('username')]}}</view>
										<view class="vip-leval">
										  <view class="circle">
										    <image v-if="item.vipLevel == 0" src="@/static/detail/vip_1.png" mode="scaleToFill" />
										    <image v-if="item.vipLevel == 1" src="@/static/detail/vip_2.png" mode="scaleToFill" />
										    <image v-if="item.vipLevel == 2" src="@/static/detail/vip_3.png" mode="scaleToFill" />
										    <image v-if="item.vipLevel == 3" src="@/static/detail/vip_4.png" mode="scaleToFill" />
										  </view>
										  <text>VIP</text>
										</view>
									</view>
								</view>

								<!-- 单数 -->
								<view class="right-numwrap">
									<view class="li">
										<view class="txt" :style="langR =='zh'? 'max-width: 120rpx;':'max-width: 120rpx;font-size:24rpx;'">{{$t('发布采购')}}</view>
										<view class="num">{{!item.totalPurchase ? 0:item.totalPurchase}}</view>
									</view>
									<view class="li">
										<view class="txt" :style="langR =='zh'? 'max-width: 120rpx;':'max-width: 120rpx;font-size:24rpx;'">{{$t('成交单数')}}</view>
										<view class="num">{{!item.totalDeal? 0:item.totalDeal}}</view>
									</view>
									<view class="li">
										<view class="txt" :style="langR =='zh'? 'max-width: 120rpx;':'max-width: 120rpx;font-size:24rpx;'">{{$t('成交率')}}</view>
										<view class="num">{{ ((item.dealRate || 0) * 100).toFixed(0) }}% </view>
									</view>
								</view>


							</view>
						<view class="img">
							
							<image 
								v-if="item.purchaseInfo.productImgUrls"
								class="pic"  
								:src="handlePicSrc(item.purchaseInfo.productImgUrls)" 
								mode="aspectFill" 
							/>
						</view>
						<view class="bottom-desc">
					
							<view class="desc-w flex-b">
								<view class="name ellipsis_two">
									<text style="color: #ff6a00;" class="name">{{$t('采购')}}:</text>
									{{item.purchaseInfo[plangJava('productName')]}}
								</view>
								<view class="rg-circle">
									<image src="/static/caigou/buyx.png" />
									<text>{{!item.purchaseInfo.amount?0:item.purchaseInfo.amount}}</text>
								</view>
							</view>
							<!-- 参与报价 -->

							<view class="rank-price" v-if="currentTapIndex == 2">
								<view class="txt fz24">{{$t('当前的报价排名')}}</view>
								<view class="r-line" >
									<view class="line"></view>
									<view class="rate fz24">	{{$t('第')}}<text>{{item.ranking}}</text>{{$t('位')}}</view>
								</view>
							</view>
							<view class="btn " v-else :style="langR == 'zh'?'font-size:28rpx':'font-size:24rpx'">{{$t('已有')}}
								<text style="padding: 0 6rpx;">{{!item.participateCount?0:item.participateCount}} </text>{{$t('人感兴趣并参与报价')}}</view>


						
						</view>

					</view>
				</view>
				<!-- <view v-if="isLast">最后一页</view> -->
			</scroll-view>
		</view>
		<view class="w100p pr list_block" v-show="currentTapIndex == 3">
			<caigou></caigou>
		</view>


		<view class="releaseBoxxxx" @click="sendAdvertising"  v-if="vipPrivilegeGet('发布采购询单',true,true)">
			 <image  :src="getImageUrl('/shopstatic/icon/releaseIcon.png')" mode="" class="w-40 h-40"></image>
			 <p class="fz22 text-white mt-10">{{$t('发布')}}</p>
		</view>
		
	</view>
</template>

<script>

import CommonHeader from "@/pages/components/common-header.vue";
import {shopProductList,purchaseInfoList,faQuotationList,unViewNumber} from "@/api/caigou.js"
import { isBase64 } from '@/assets/public.js'
import { IMAGE_URL } from '@/config/app.js'
import  caigou  from './components/caigou.vue';
// import vipImg1 from '@/static/detail/vip_1.png';
// import vipImg2 from '@/static/detail/vip_2.png';
// import vipImg3 from '@/static/detail/vip_3.png';
// import vipImg4 from '@/static/detail/vip_4.png';

import {
	mapState
} from 'vuex';
export default {
	components: {
		CommonHeader,
		caigou
	},
	computed: {
		// 使用mapState生成计算属性
		...mapState({
			lang: state => state.commonData.lang,
		})
	},
	watch: {
		lang(newValue, oldValue) {
			console.log('lang changed:', newValue);
		},
	},
	data() {
		return {
			categoryList: [],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			tabList: [{
				title: this.$t('采购寻单'),
				count: 0,
			}, {
				title: this.$t('我发布的'),
				count: 2,
			}, {
				title: this.$t('我参与的'),
				count: 1,
			},{
				title: this.$t('采购商'),
				count: 0,
			}],
			currentTapIndex: 0,
			purchaseList:[],
			allPurchaseList: [],
			purchaseInfo:{
				current:1,
				size:10,
				productName:"",
				productNameRu:"",
				purchaseUserId:"",
				categoryId:""
			},
			qutationForm:{
				current:1,
				size:10,
				quotationUserId:"",
				productName:"",
				productNameRu:""
			},
			unViewNumbers:{},
			scrollTop:0,
			isRefresher:false,
			isData: false,
			isLast:false,
		}
	},
	async onLoad(val) {
		
	},
	created(){
		this.getPurchaseInfoList(this.purchaseInfo)
		this.getUnViewNumber()
		window.onNativeShow = () => {
			if (this.currentTapIndex == 1) {
				this.onTab(this.currentTapIndex)
			}
		}
	
	},
	mounted() {
		
		this.$nextTick(async () => {
			try {
				const {
					data
				} = await this.$u.api.shopping.getCategory({});
				this.categoryList = data;
				if (!!data?.length) {
					// this.firstCategory(data[0].id);
				} else {
					this.subCategoryList = [{
						name: this.lang == 'zh' ? this.$t('全部') : 'Все',
					}]
					this.thrCategoryList = [];
				}
			} catch (e) { }
		})
	},
	methods: {
		async sendAdvertising(){
		  if (this.lang == 'zh') {
				await this.unAuthRedirect();
			}
			uni.navigateTo({
				url: '/pages/caigou/publishInfo/index',
				webivew: 'zWebViewShop',
			})
		},
		//查询未查看的我发布的和我参与的数量
		getUnViewNumber(){
			unViewNumber({"userId":uni.getStorageSync('user_id')}).then((res)=>{
				if(res.code==0){
					this.unViewNumbers=res.data
				}
			})
		},

		//查询我参与的采购寻单数据列表
		getFaQuotationList(data){
			uni.showLoading({
				title: 'loading'
			});
			faQuotationList(data).then((res)=>{
				// if(res.code==0){
				// 	this.purchaseList=res.data.records
				// }
				if(res.code==0){
					const total = res.data.total
					this.isLast = this.qutationForm.current * this.qutationForm.size > total
					if (this.qutationForm.current === 1) {
						this.purchaseList = [].concat(res.data.records)
					}else{
						this.purchaseList = this.purchaseList.concat(res.data.records)
					}
					console.log('222', this.purchaseList)
				} else {
					// uni.$u.toast(res.data.msg)
					uni.$u.toast(res.data[this,plang('msg')])
				}
				// 关闭loading
				this.isLoading = false;
				this.isRefresher = false;
				uni.hideLoading()
			}).catch(()=>{
				this.isLoading = false;
				this.isRefresher = false;
				uni.hideLoading()
			})
		},
		//获取当前用户的商品信息列表-废弃
		getShopProductList(){
			shopProductList({"userId":uni.getStorageSync('user_id')}).then((res)=>{
				if(res.code==0){
					this.purchaseList=res.data.records
				}
			})
		},
		//获取采购寻单数据列表
		getPurchaseInfoList(data){
			uni.showLoading({
				title: 'loading'
			});
			purchaseInfoList(data).then((res)=>{
				if(res.code==0){
					this.isLast = this.purchaseInfo.current * this.purchaseInfo.size > res.data.total
					if (this.purchaseInfo.current === 1) {
						this.purchaseList = [].concat(res.data.records)
					}else{
						this.purchaseList = this.purchaseList.concat(res.data.records)
					}
				} else {
					// uni.$u.toast(res.data.msg)
					uni.$u.toast(res.data[this,plang('msg')])
				}
				// 关闭loading
				this.isLoading = false;
				this.isRefresher = false;
				uni.hideLoading()
			}).catch(()=>{
				this.isLoading = false;
				this.isRefresher = false;
				uni.hideLoading()
			})
		},
		
		onGoDetail(id) {
			if (this.currentTapIndex == 1) {
				uni.navigateTo({
					url:'/pages/caigou/myPublishDetail/index?id='+id,
				})
				return;
			}
			
			if (this.currentTapIndex == 2) {
				uni.navigateTo({
					url:'/pages/caigou/canyuDetail/index?id='+id,
				})
				return;
			}
			uni.navigateTo({
				url:'/pages/caigou/xundanDetail/index?id='+id,
			})
		},
		onTab(index) {
			this.purchaseInfo.current=1
			this.purchaseInfo.size=10
			this.scrollTop = 0
			this.purchaseInfo.categoryId = ''

			if(index == 3) {
				if (!this.vipPrivilegeGet('采购商列表')) {
					return;
				}
			}

			if(index==0){
				this.purchaseInfo.purchaseUserId = ''
				this.getPurchaseInfoList(this.purchaseInfo)
			}else if(index ==1){
				this.purchaseInfo.purchaseUserId = uni.getStorageSync('user_id')
				this.getPurchaseInfoList(this.purchaseInfo)
			}else{
				this.qutationForm.quotationUserId = uni.getStorageSync('user_id')
				this.getFaQuotationList(this.qutationForm)
			}
			this.currentTapIndex = index;
		},
		getWidth() {
			let arr = ['40rpx', '56rpx', 'auto']
			return arr[2];
		},
		// 跳转{{$t('搜索')}}页
		goSearch(e) {
			console.log('e----', e)
			this.purchaseInfo.productName = e.detail.value
			this.purchaseInfo.current = 1
			this.getPurchaseInfoList(this.purchaseInfo)
			// uni.navigateTo({
			// 	url: '/pages/caigou/search/index'
			// })
		},

		// 触底加载
		lower() {
			if (this.isData) return;
			if(!this.isLast){
				if(this.currentTapIndex!=2){
					this.purchaseInfo.current++;
					this.getPurchaseInfoList(this.purchaseInfo)
				}else{
					this.qutationForm.current++;
					this.getFaQuotationList(this.qutationForm)
				}
			}
			
		},
		// 下拉刷新触发
		fresh() {
			this.purchaseInfo.current = 1;
			this.qutationForm.current =1;
			this.isRefresher = true;
			this.isData = false;
			this.purchaseInfo.categoryId = ''
			if(this.currentTapIndex!=2){
				this.getPurchaseInfoList(this.purchaseInfo)
			}else{
				this.getFaQuotationList(this.qutationForm)
			}
			
		},
		// 下拉刷新复位
		store() {
			this.isRefresher = false;
		},
		// 处理图片链接
		handlePicSrc(src){
			let newSrc = ''
			if(!src){
				newSrc = '/static/caigou/pic.png'
			}else{
				const urlsArr = src.split(',')
				newSrc = urlsArr[0].startsWith('http') ? urlsArr[0] : IMAGE_URL + urlsArr[0]
			}
			return newSrc
		},
		// {{$t('切换')}}分类
		firstCategory(id){
			if(this.currentTapIndex!=2){
				this.purchaseInfo.current = 1
				this.purchaseInfo.categoryId = id
				this.getPurchaseInfoList(this.purchaseInfo)
			}else{
				this.getFaQuotationList(this.qutationForm)
			}
		}
	
	}
	
}
</script>

<style scoped lang="scss">
@import './index.scss';

</style>